<template>
    <div class="shop-info-wrap safe-area-bottom" >
      <van-nav-bar
          :title="pageTitle"
          left-arrow
          fixed
          :border="false"
          @click-left="onClickLeft"
      />
  
      <div class="search-box" >
          <div class="search-input" >
              <van-search
                  v-model="searchValue"
                  placeholder="请输入商品或者分类"
                  @search="onSearch"
                  :left-icon="searchHistoryIcon"
              >
              </van-search>
              
              <div class="search-btn active-btn" @click="handleToSearch" >搜索</div>
          </div>
      </div>
      <div class="tab-ul" >
          <div @click="handleToCurrent(0)" :class="['tab-li', current === 0 ? 'on' : '']" >综合</div>
          <div @click="handleToCurrent(1)" :class="['tab-li', current === 1 ? `on ${sortStatus}` : 'default']" >销量</div>
          <div @click="handleToCurrent(2)" :class="['tab-li', current === 2 ? 'on' : '']" >最新</div>
          <div @click="handleToCurrent(3)" :class="['tab-li', current === 3 ? `on ${sortStatus}` : 'default']" >价格</div>
      </div>
  
      <!-- 商品列表 -->
      <van-list
        v-model="loadingPage"
        :finished="finished"
        :finished-text="list.length ? '没有更多了' : ''"
       @load="ajaxGoodList"
       :immediate-check="false"
      >
      <!-- -->
          <div v-if="finished && !list.length" class="empty-good" >
              <van-empty description="暂无商品" />
          </div>
          
          <!-- 商品列表 -->
          <div class="good-ul" >
              <goodItem
              v-for="(item, index) in list"
              :key="index"
              :item="item"
              isShop
              ></goodItem>
          </div>
      
      </van-list>
  
  
    </div>
  </template>
  
  <script>
  import {  searchHistoryIcon, sortDefault, sortDown, sortUp } from '@/tool/static-img';
  import goodItem from './components/good-item';
  import { GOOD_LIST } from '@/api/home';
  export default {
      components:{
          goodItem
      },
      data() {
          return {
              searchHistoryIcon, sortDefault, sortDown, sortUp,
              pageTitle: localStorage.getItem('shopInfoName'),
              searchValue: '',
              current: 0,
              sortStatus: 'default',
              id: this.$route.query.id,
              
              // 分页
              page: 1,
              pageSize: 20,
              list: [],
              loadingPage: false,
              finished: false,
          }
      },
      activated(){
          this.pageTitle=localStorage.getItem('shopInfoName')
      },
      beforeRouteEnter(to, from, next) {
          next(vm => {
              console.log(from.name);
              
              if(from.name == 'home'|| from.name == 'newArea' || from.name == 'goodList' || from.name == 'good' || from.name == 'goldShop' || from.name=='selection' || from.name==null) {
                  vm.resetInit();
              }
          }) 
      },
      methods: {
          onClickLeft() {
              this.$router.back()
          },
          onSearch(val) {
                  
              this.resetInit();
          },
          // 去搜索
          handleToSearch() {
              
              this.onSearch(this.searchValue);
          },
          // 切换tab
          handleToCurrent(index) {
              if(this.current == index && (index == 0 || index == 2)) {
                  return
              }
              
              // 自身时,有排序则改变
              if(this.current == index && (index == 1 || index == 3)) {
                  if(this.sortStatus == 'default') {
                      this.sortStatus = 'sortDown';
                  }else if(this.sortStatus == 'sortDown') {
                      this.sortStatus = 'sortUp';
                  }else if(this.sortStatus == 'sortUp') {
                      this.sortStatus = 'default';
                  }
              }else {
                  this.sortStatus = 'default';
              }
              
              this.current = index;
              
              // 数据请求
              this.resetInit();
          },
          resetInit() { //重置
            this.page = 1;
            this.list = [];
            this.finished = false;
          
            this.loadingPage = true;
            this.ajaxGoodList()
          },
          // 列表请求
          ajaxGoodList() {
              let params = {};
              params['page_num'] = this.page;
              params['page_size'] = this.pageSize;
              params['shop_id'] = this.$route.query.id;
              
              if(this.searchValue && this.searchValue.trim()) {
                  params['keyword'] = this.searchValue.trim();
              }
  
              if(this.$route.query.shopId) {
                  params['shop_id'] = this.$route.query.shopId;
              }
              
              params['sort_type'] = this.current + 1;
              
              if((this.current == 1 || this.current == 3) && this.sortStatus != 'default') {
                  if(this.sortStatus == 'sortUp') {
                      params['sort_rule'] = 1;
                  }else if(this.sortStatus == 'sortDown') {
                      params['sort_rule']= 0;
                  }
              }
              
              this.$http.post(GOOD_LIST, params)
              .then(res => {
                const {
                  list
                } = res.data;
              
                if(list && list.length) {
                   this.page++;
                   this.list = this.list.concat(list);
                   // 加载状态结束
                   this.loadingPage = false;
                   if(list.length < this.pageSize) {
                    this.finished = true;
                   }
                }else {
                  this.finished = true;
                }
              })
          }
      }
  
  }
  
  </script>
  <style lang="scss" >
  .shop-info-wrap{
  
      min-height: 100vh;
      padding-top: 2.7rem;
      background-color: #F5F5F5;
      box-sizing: border-box;
      .van-nav-bar .van-icon{
          color: #333333;
      }
      .van-nav-bar__arrow{
          font-size: .4rem;
      }
  
      .search-box{
          position: fixed;
          top: 0.8rem;
          left: 0;
          width: 100%;
          padding: 0.1rem 0.32rem;
          border-bottom: 0.02rem solid #f5f5f5;
          background: #fff;
          box-sizing: border-box;
           .search-input{
              position: relative;
              width: 6.86rem;
              .search-btn{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 0.28rem;
                  font-weight: 400;
                  color: #fff;
                  position: absolute;
                  right: 0.06rem;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  width: 1.12rem;
                  height: 0.52rem;
                  border-radius: 0.3rem;
                  background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
              }
              .van-search{
                  padding: 0;
                  background-color: #f4f4f4;
                  border-radius: 0.32rem;
                  .van-search__content{
                      background-color: #f4f4f4;
                      border-radius: 0.32rem;
                      .van-cell{
                          align-items: center;
                          padding: .1rem .1rem .1rem 0;
                      }
                  }
                  .van-field__control{
                      height: .52rem;
                      width: 4rem;
                      line-height: .52rem;
                      font-weight: 400;
                      font-size: 0.28rem;
                  }
                  .van-icon{
                      height: .4rem;
                  }
                  .van-icon__image{
                      width: .4rem;
                      height: .4rem;
                  }
              }
          }
      }
  
      .tab-ul{
          position: fixed;
          top: 1.72rem;
          left: 0;
          display: flex;
          width: 100%;
          height: .92rem;
          background: #ffffff;
          .tab-li{
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              flex: 1;
              font-weight: 400;
              font-size: 0.32rem;
              color: #999999;
              &.on{
                  font-weight: 500;
                  font-size: 0.32rem;
                  color: #F32A23;
              }
              &.default{
                  &::before{
                      content: '';
                      position: absolute;
                      top: 0;
                      bottom: 0;
                      right: 0.4rem;
                      margin: auto;
                      width: 0.14rem;
                      height: 0.2rem;
                      background: url('../../images/sort-default.png') no-repeat center;
                      background-size: cover;
                  }
              }
              &.sortDown{
                  &::before{
                      content: '';
                      position: absolute;
                      top: 0;
                      bottom: 0;
                      right: 0.4rem;
                      margin: auto;
                      width: 0.14rem;
                      height: 0.2rem;
                      background: url('../../images/sort-down.png') no-repeat center;
                      background-size: cover;
                  }
              }
              &.sortUp{
                  &::before{
                      content: '';
                      position: absolute;
                      top: 0;
                      bottom: 0;
                      right: 0.4rem;
                      margin: auto;
                      width: 0.14rem;
                      height: 0.2rem;
                      background: url('../../images/sort-up.png') no-repeat center;
                      background-size: cover;
                  }
              }
          }
      }
  
      .good-ul{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 0.24rem  0.24rem 0;
              
      }
     
  }
  </style>